<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单input框选择器</title>
    <script type="text/javascript" src="jquery-3.7.1.js"></script>
</head>
<body>
<script>
    $(function (){
        $("#btn1").click(function (){
            let username = $(":text").val();
            alert(username);
        })
    })
    $(function (){
        $("#btn2").click(function (){
            let password = $(":password").val();
            alert(password);
        })
    })
    $(function (){
        $("#btn3").click(function (){
            let radio = $(":radio:checked").val();
            alert(radio);
        })
    })

</script>
<form id="form1">
    用户名：
    <input type="text" name="username"><br><br>
    密码:
    <input type="password" name="password"><br><br>
    性别:
    <input type="radio" name="gender" value="1" checked>男
    <input type="radio" name="gender" value="0" >女
    <br>
    <input type="submit" value="提交">
</form>
<button type="button" id="btn1">选择文本输入框并输出用户输入的值</button>
<button type="button" id="btn2">选择密码输入框并输出密码输入的值</button>
<button type="button" id="btn3">选择单选框的value属性值</button>
</body>
</html>